<template>
  <div class="query-select-root">
    <el-input placeholder="请输入内容" v-model="inputValue">

      <el-select v-model="queryType" slot="prepend" placeholder="请选择">
        <el-option v-for="(item, index) in selectTypeList" :key="index" :label="item.label"
                   :value="item.value" :disabled="item.disabled"></el-option>
      </el-select>

      <template slot="append">

        <!--        <el-dropdown trigger="click" @command="handleCommand" class="q-dro-ul">-->
        <!--          <el-button icon="el-icon-arrow-down el-icon-s-grid"></el-button>-->
        <!--          <el-dropdown-menu slot="dropdown">-->
        <!--            <el-dropdown-item v-for="(item, index) in selectTypeList" :command="item.value"-->
        <!--                              :icon="item.icon"-->
        <!--                              :class="['q-dro-item', `${item.value}`]"-->
        <!--                              :disabled="item.disabled"-->
        <!--                              :key="index">{{item.label}}-->
        <!--            </el-dropdown-item>-->
        <!--          </el-dropdown-menu>-->
        <!--        </el-dropdown>-->

        <el-button @click="submit" icon="el-icon-search"></el-button>
      </template>
    </el-input>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'

  export default {
    name: 'querySelect',
    props: {
      selectTypeList: {
        type: Array,
        default: () => [
          {
            icon: 'el-icon-office-building',
            label: '种质资源库',
            value: 'zzzyk',
            disabled: false
          },
          {
            icon: 'el-icon-office-building',
            label: '种质资源',
            value: 'zzzy',
            disabled: false
          },
          {
            icon: 'el-icon-office-building',
            label: '实验室',
            value: 'sys',
            disabled: false
          },
          {
            icon: 'el-icon-office-building',
            label: '标本库',
            value: 'bbk',
            disabled: true
          },
          {
            icon: 'el-icon-office-building',
            label: '土壤库',
            value: 'trk',
            disabled: true
          },
          {
            icon: 'el-icon-office-building',
            label: '野外采集',
            value: 'ywcj',
            disabled: true
          },
          {
            icon: 'el-icon-office-building',
            label: '加工中心',
            value: 'jgzx',
            disabled: true
          },
          {
            icon: 'el-icon-office-building',
            label: '采种田',
            value: 'czt',
            disabled: true
          },
          {
            icon: 'el-icon-office-building',
            label: '资源圃',
            value: 'zyp',
            disabled: true
          }

        ]
      }
    },
    components: {},
    setup(props, content) {

      let {} = props

      const data = reactive({
        inputValue: '',
        queryType: ''
      })

      const reset = () => {
        // data.inputValue = ''
        // data.queryType = ''
        // removeClassName()
      }

      const submit = () => {
        let { inputValue, queryType } = data
        if (!inputValue || inputValue === '') {
          Message.error('请输入查询条件')
          return
        }

        if (!queryType || queryType === '') {
          Message.error('请选择查询类型')
          return
        }

        reset()
        content.emit('submit', { inputValue, queryType })
      }

      const handleCommand = value => {
        data.queryType = value
        removeClassName()
        addClassName(value)
      }

      const removeClassName = () => {
        let domList = document.getElementsByClassName('q-dro-item')
        domList.forEach(dom => {
          dom.classList.remove('q-dro-active')
        })
      }

      const addClassName = value => {
        let dom = document.querySelector(`.q-dro-item.${value}`)
        dom.classList.add('q-dro-active')
      }

      return { ...toRefs(data), submit, handleCommand }
    }
  }
</script>

<style lang="scss">
  $full: 100%;
  .query-select-root {
    width: 100%;
    height: 100%;

    .el-input {
      .el-select {
        .el-input {
          width: 130px;
          border: none;
        }
      }
    }
  }
</style>
